<template>
  <div>
    <div>
      <QueryConsignment v-model:title='title' ref="queryRef" @queryClick="inquiry" @resettingClick = 'resetting'/>
    </div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="customerTitle1">
            <span class="titleHead1" >订单列表</span>
            <div>
<!--               <el-button
                class="customerButton2"
                type="danger"
                @click="cancellation(4)"
              >
                草稿删除
              </el-button>-->
              <VabButton
                title="审核撤回"
                class="customerButton1"
                plain
                type="primary"
                @click="cancellation(2)"
              />
              <VabButton
                title="寄售结算"
                plain
                type="primary"
                @click="cancellation(1)"
              />
            </div>
          </div>
        </template>
        <div>
          <el-table
            load="false"
            ref="singleTableRef"
            :data="customer_order_list"
            max-height="300px"
            style="width: 100%"
            :tooltip-options="{ enterable: true, placement: 'top' }"
            tooltip-effect="dark"
            highlight-current-row
            @current-change="handleSelectionChange"
          >
            <el-table-column  align="center" width="40" fixed="left" show-overflow-tooltip>
              <template #default="scope">
                <div class="table_style">
                  <label class="el-checkbox"
                         :class="{ 'is-checked': radioIndex && radioIndex.id === scope.row.id }"
                         @click="handleRadio(scope.row,$event)"
                  >
                    <span class="el-checkbox__input" :class="{ 'is-checked':  radioIndex && radioIndex.id === scope.row.id  }"><span class="el-checkbox__inner"></span></span>
                  </label>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="序号" align="center" width="80" fixed="left" show-overflow-tooltip>
              <template #default="scope">
                <div class="table_style">
                  <span style="margin-left: 5px"
                        v-text="(currentPage - 1) * pageSize + (scope.$index + 1)"
                  ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单据号" align="center" min-width="150" fixed="left" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis textFont"
                 @click="particulars(scope.row,$event)"
               >
                 {{scope.row.uid || '--' }}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="客户" align="center" min-width="180" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 style="text-align: left"
                 v-text="_FieldFormat(scope.row.customer_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售组织" align="center" width="210" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.sales_org_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="单据状态" align="center" width="110" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
               >
                 {{scope.row.status_str || '--'}}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="销售数量" align="center" prop="sales_num" width="110" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.sales_num,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售金额" align="center" width="120" prop="total_amount" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="numberMoney"
               >
                 ￥
                 {{Number(scope.row.total_amount).toFixed(2)}}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="开票类型"  width="160" align="center" show-overflow-tooltip>
              <template #default="scope">
                       <span
                         class="ellipsis "
                         v-text="_FieldFormat(scope.row.invoice_name, '')"
                       ></span>
              </template>
            </el-table-column>
            <el-table-column label="币别"  width="160" align="center" show-overflow-tooltip>
              <template #default="scope">
                       <span
                         class="ellipsis "
                         v-text="_FieldFormat(scope.row.trading_curr_name, '')"
                       ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售员" align="center" width="160" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.sales_user_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售部门" align="center" width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.sales_dept_name  ,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" min-width="180" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.create_time  ,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120" fixed="right">
              <template #default="scope">
                <el-button v-if="scope.row.status == 0 || scope.row.status == 1 || scope.row.status == 21  || scope.row.status == 19  " link type="primary" @click="treatment_list(scope.row,$event)">
                  去处理
                </el-button>
                <el-button v-else link type="primary" @click="particulars(scope.row,$event)">
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="customerPagination">
          <el-pagination
            background
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            layout="total, prev, pager, next,sizes, jumper"
            :page-sizes="[20, 50, 100, 200]"
            small="small"
            :total="count_number"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
        <!--        //下载按钮-->
        <!--        <VabButton update title="下载" @click="upDown"/>-->
      </el-card>
      <el-card id="productId">
        <template #header>
          <div class="customerTitle1">
            <span class="leve2_title leave3Title titleHead1">产品信息<span class="title1"><span v-if="saleOrderDetail" class="title2">单据号</span>{{saleOrderDetail?.uid || ''}}</span></span>
          </div>
        </template>
        <div>
          <el-table	:tooltip-options="{ enterable: true, placement: 'top' }" tooltip-effect="dark"  :data="saleOrderDetail?.detail"  max-height="300px" >
            <el-table-column label="序号" align="center" width="60">
              <template #default="scope">
                <div class="table_style">
               <span style="margin-left: 5px" v-text=" (scope.$index + 1)"
               ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="订单编号" align="center" width="150" show-overflow-tooltip>
              <template #default="scope">
                       <span
                         class="ellipsis"
                       >
                         {{scope.row.order_uid || '--' }}
                       </span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center" width="90" show-overflow-tooltip>
              <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.goods_type,  '')"
                           ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品编码" align="center" min-width="140" show-overflow-tooltip>
              <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.goods_no,  '')"
                           ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center" min-width="200" show-overflow-tooltip>
              <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.goods_name,  '')"
                           ></span>
              </template>
            </el-table-column>
            <el-table-column label="条码" align="center" width="150">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.barcode || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" width="100" show-overflow-tooltip>
              <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.spec_name,  '')"
                           ></span>
              </template>
            </el-table-column>
            <el-table-column label="销售数量" align="center" width="90" show-overflow-tooltip>
              <template #default="scope">
                           <span
                             class="ellipsis numberMoney"
                             v-text="_FieldFormat(scope.row.sales_num,  '')"
                           ></span>
              </template>
            </el-table-column>
            <el-table-column label="批次号" align="center" width="100" show-overflow-tooltip>
              <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.batch_no,  '')"
                           ></span>
              </template>
            </el-table-column>
<!--            <el-table-column label="生产日期" align="center" width="180" show-overflow-tooltip>
              <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="'无'"
                           ></span>
              </template>
            </el-table-column>-->
            <el-table-column label="有效期至" align="center" width="180" show-overflow-tooltip>
              <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.expire_date,  '')"
                           ></span>
              </template>
            </el-table-column>
            <el-table-column label="仓库" align="center" width="150" show-overflow-tooltip>
              <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.consignment_warehouse_name,  '')"
                           ></span>
              </template>
            </el-table-column>
            <el-table-column label="出库单号" align="center" width="150" show-overflow-tooltip>
              <template #default="scope">
                           <span
                             class="ellipsis"
                             v-text="_FieldFormat(scope.row.stockout_no,  '')"
                           ></span>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import QueryConsignment from './component/QueryConsignment.vue'
import router from "/@/router";
import { ref } from "vue";
import { orderGroupCancelApproval, orderGroupList } from "/@/api/dms/order/group";
import { ElMessage, ElMessageBox } from "element-plus";
import { FieldFormat } from "/@/utils/utils";
import { orderCancelApproval, orderList } from "/@/api/dms/order";
defineOptions({
    name: 'ConsignmentSettlement',
  })
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const radioIndex = ref<any>(null)
const singleTableRef = ref<any>(undefined)
const title = ref('寄售结算')
const loading=ref(false)
const pageSize = ref(20)
const currentPage = ref(1)
const count_number = ref(0)
const customer_order_list = ref<any>([])
const queryList =ref<any>({})
let saleOrderDetail = ref<any>(undefined)
//按钮事件
const cancellation = (value:any)=>{
  if(value === 1){
    router.push(`/order/addStatement`)
  }else if(value === 2){
    if(radioIndex.value.status == 10){
      ElMessageBox.confirm(
        `订单审核撤回后无法执行后续操作，请确认是否撤回 单据编号为：${radioIndex.value.uid || '--'}的订单。`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '返回',
          type: 'warning',
        }
      )
        .then(() => {
          orderCancelApproval({uid:radioIndex.value.uid}).then((data:any)=>{
            if (data.code == 200){
              radioIndex.value = undefined
              ElMessage.success(`审核撤回成功`)
              getOrderList(queryList.value)
            }
          })
        })
    }else {
      ElMessage.warning(`单据状态只有在待审核时才能审核撤回`)
    }
  }else if(value == 4) {
    if(radioIndex.value.status == '0'){
      ElMessageBox.confirm(
        `订单删除后无法执行后续操作，请确认是否删除 单据编号为：${radioIndex.value.uid || '--'}的订单。`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '返回',
          type: 'warning',
        }
      )
        .then(() => {
          /* orderGroupCancelApproval({uid:radioIndex.value.uid}).then((data:any)=>{
             if (data.code == 200){
               radioIndex.value = undefined
               ElMessage.success(`审核撤回成功`)
               getOrderList(queryList.value)
             }
           })*/
        })
    }else { ElMessage.warning(`单据状态只有是草稿时才能删除`)}
  }
}
const abc = ()=>{

}
//分页
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getOrderList(queryList.value)
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getOrderList(queryList.value)
}
// 多选
const handleSelectionChange = (val: any, va: any) => {
  saleOrderDetail.value = val
  /* document
     .getElementById('productId')
     ?.scrollIntoView({ behavior: 'instant', block: 'end' })*/
}
// 获取列表
const getOrderList =async (value:object = {},type=0)=>{
  loading.value=true
  await orderList({from:'settle',page:currentPage.value,pagesize:pageSize.value,...value}).then((data:any)=>{
    if(data.code == 200){
      loading.value=false
      count_number.value =  data.data.count
      customer_order_list.value = data.data.list
      saleOrderDetail.value = data.data.list[0]
      singleTableRef.value!.setCurrentRow(data.data.list[0])
      if(type==1){
        ElMessage.success(`查询成功`)
      }else if(type == 2){
        ElMessage.success(`重置成功`)
      }
    }
  })
}
// 查询重置
const inquiry = (va:any)=>{
  const data = {
    order_uid:va.order_uid.toString(),
    goods_name: va.goods_name.toString(),
    goods_no:va.goods_no.toString(),
    sales_org_id: va.sales_org_id.toString(),
    customer_uid: va.customer_uid.toString(),
    sales_user_name: va.sales_user_name.toString(),
  }
  radioIndex.value=undefined
  queryList.value = { ...queryList.value,...data}
  getOrderList(queryList.value,1)
}
const resetting = (va:any)=>{
  const data = {
    order_uid:va.order_uid.toString(),
    goods_name: va.goods_name.toString(),
    goods_no:va.goods_no.toString(),
    sales_org_id: va.sales_org_id.toString(),
    customer_uid: va.customer_uid.toString(),
    sales_user_name: va.sales_user_name.toString(),
  }
  queryList.value = { ...queryList.value,...data}
  radioIndex.value=undefined
  getOrderList(queryList.value,2)
}
// 详情
const particulars = (value:any,event:any)=>{
  event.stopPropagation();
  router.push(`/order/consignmentDetails?id=${value.uid}`)
}
// 去处理
const treatment_list=(row:any,event:any)=>{
  event.stopPropagation();
  router.push(`/order/addStatement?id=${row.uid}`)

}
// 单选
const handleRadio = (row: any,event:any) => {
  event.stopPropagation();
  // if(row.status == 5) return
  // radioIndex.value = row
  if (radioIndex.value && radioIndex.value.uid == row.uid  )  {
    radioIndex.value = undefined
    return
  }
  radioIndex.value = row
}
onActivated(()=>{
  getOrderList(queryList.value)
  radioIndex.value = undefined
})
</script>

<style lang="scss" scoped>
@import "../index";
</style>

